<template>
  <div class="login-container">
    <div class="box2">
      <img
        class="lt"
        src="https://img.axureshop.com/7a/4a/a8/7a4aa826e79b40d086fba67fb100e0f9/images/0登陆页/u3.png"
        alt=""
      />
      <img
        class="lb"
        src="https://img.axureshop.com/7a/4a/a8/7a4aa826e79b40d086fba67fb100e0f9/images/0登陆页/u5.png"
        alt=""
      />
      <img
        class="rt"
        src="https://img.axureshop.com/7a/4a/a8/7a4aa826e79b40d086fba67fb100e0f9/images/0登陆页/u4.png"
        alt=""
      />
      <img
        class="ctr"
        src="https://img.axureshop.com/7a/4a/a8/7a4aa826e79b40d086fba67fb100e0f9/images/0登陆页/u25.png"
        alt=""
      />
    </div>
    <div class="box">
      <el-card class="box-card">
        <img
          src="https://img.axureshop.com/7a/4a/a8/7a4aa826e79b40d086fba67fb100e0f9/images/0登陆页/u24.png"
          alt=""
        />
        <h3>人力资源后台管理</h3>
        <el-form :model="form" style="margin-top: 10px">
          <el-form-item>
            <el-input v-model="form.mobile">
              <template #prefix>
                <img
                  style="height: 25px; margin-top: 5px"
                  src="https://img.axureshop.com/7a/4a/a8/7a4aa826e79b40d086fba67fb100e0f9/images/0登陆页/u13.png"
                  alt=""
                />
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="form.password">
              <template #prefix>
                <img
                  style="height: 25px; margin-top: 5px"
                  src="https://img.axureshop.com/7a/4a/a8/7a4aa826e79b40d086fba67fb100e0f9/images/0登陆页/u17.png"
                  alt=""
                />
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="form.code">
              <template #prefix>
                <img
                  style="height: 25px; margin-top: 5px"
                  src="https://img.axureshop.com/7a/4a/a8/7a4aa826e79b40d086fba67fb100e0f9/images/0登陆页/u21.png"
                  alt=""
                />
              </template>
              <template #append>
                <span>9 5 2 8</span>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-checkbox v-model="form.isAgree">用户平台使用协议</el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="width: 100%" :disabled="!form.isAgree" @click="golist">登录</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>
<script>
export default {
  name: "Login",
  data() {
    return {
      form: {
        mobile:'',
        password:'',
        isAgree: false,
        code:''
      },
      checked: false,
    };
  },
  methods:{
    async golist() {
      await this.$store.dispatch('user/getloginform', this.form)
      this.$message.success('登录成功')
      this.$router.push('/')
    }
  }
};
</script>
<style lang="scss" scoped>
.login-container {
  position: relative;
  height: 100%;
  background-image: linear-gradient(#3fccfd, #996cfb);
  overflow: hidden;
  .box {
    width: 400px;
    .box-card {
      position: absolute;
      top: 270px;
      right: 500px;
      width: 400px;
      background: #fff;
      z-index: 1;
      h3 {
        display: inline-block;
        margin: 0;
        vertical-align: bottom;
        line-height: 50px;
        font-size: 30px;
        font-weight: 400;
      }
    }
  }
  .box2 {
    position: absolute;
    height: 100%;
    width: 100%;
    .lt {
      position: absolute;
      top: 20px;
      left: 80px;
    }
    .lb {
      position: absolute;
      bottom: -250px;
      left: -250px;
    }
    .rt {
      position: absolute;
      top: -200px;
      right: -150px;
    }
    .ctr {
      position: absolute;
      top: 250px;
      left: 400px;
    }
  }
}
</style>
